<template>
  <div class="cgjhadd">
    <el-form ref="form" :model="form" :rules="rules" label-width="20%">
      <div class="contain">
        <div class="left">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="申请信息" name="1" id="shenqing">
              <template v-if="!isZz">
                <el-button
                  type="primary"
                  @click="showChooseEnter=true"
                  style="margin-bottom: 20px;margin-left: 20px;"
                  size="mini"
                >选择企业
                </el-button>
                <el-button
                  type="info"
                  plain
                  @click="cancelChooseEnter()"
                  style="margin-bottom: 20px;margin-left: 20px;"
                  size="mini"
                >取消选择
                </el-button>
              </template>

              <div class="form-box">
                <el-form-item label="企业名称" prop="enterpriseName">
                  <el-input
                    v-model="form.enterpriseName"
                    :disabled="!isEmpty(chooseEnterTem)||isZz"
                    placeholder="请输入企业名称"
                  />
                </el-form-item>
                <el-form-item label="企业法人" prop="legalPerson">
                  <el-input
                    :disabled="isZz"
                    v-model="form.legalPerson"
                    placeholder="请输入企业法人"
                  />
                </el-form-item>
                <el-form-item label="法人联系电话" prop="legalPhone">
                  <el-input
                    :disabled="isZz"
                    v-model="form.legalPhone"
                    placeholder="请输入法人联系电话"
                  />
                </el-form-item>
                <el-form-item label="企业联系人" prop="enterpriseContact">
                  <el-input
                    v-model="form.enterpriseContact"
                    :disabled="!isEmpty(chooseEnterTem)||isZz"
                    placeholder="请输入企业联系人"
                  />
                </el-form-item>
                <el-form-item label="企业联系人电话" prop="contactPhone">
                  <el-input
                    v-model="form.contactPhone"
                    :disabled="!isEmpty(chooseEnterTem)||isZz"
                    placeholder="请输入企业联系人电话"
                  />
                </el-form-item>

                <el-form-item label="企业类型" prop="enterType">
                  <el-select v-model="form.enterType" :disabled="!isEmpty(chooseEnterTem)||isZz">
                    <el-option :value="item.dictValue" :label="item.dictLabel" v-for="(item,index) in enterTypeOpts"
                               :key="index"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="行业类型" prop="typeId" :disabled="!isEmpty(chooseEnterTem)||isZz">
                  <treeselect :disabled="!isEmpty(chooseEnterTem)||isZz" v-model="form.typeId"
                              :options="qyEnterpriseTypeList" :normalizer="normalizer"
                              placeholder="选择行业类型"/>
                </el-form-item>

                <el-form-item label="生产类型" prop="productionType">
                  <el-select :disabled="isZz" filterable v-model="form.productionType" multiple placeholder="请选择生产类型">
                    <el-option
                      v-for="item in qyEnterpriseProductionTypes"
                      :key="item.id"
                      :label="item.proName"
                      :value="item.proName">
                    </el-option>
                  </el-select>
                </el-form-item>


                <el-form-item label="工商注册时间" prop="registrationDate">
                  <el-date-picker
                    :disabled="isZz"
                    clearable
                    size="small"
                    v-model="form.registrationDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择工商注册时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="税务登记时间" prop="taxRegistrationDate">
                  <el-date-picker
                    :disabled="isZz"
                    clearable
                    size="small"
                    v-model="form.taxRegistrationDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择税务登记时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="从业人员数量" prop="enterpriseScale">
                  <el-input
                    :disabled="isZz"
                    v-model="form.enterpriseScale"
                    placeholder="请输入从业人员数量"
                  />
                </el-form-item>
                <el-form-item label="环评批复时间" prop="approvalDate">
                  <el-date-picker
                    :disabled="isZz"
                    clearable
                    size="small"
                    v-model="form.approvalDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择环评批复时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="环评验收时间" prop="acceptanceDate">
                  <el-date-picker
                    :disabled="isZz"
                    clearable
                    size="small"
                    v-model="form.acceptanceDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择环评验收时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="生产状况">
                  <el-input
                    :disabled="isZz"
                    v-model="form.productionStatus"
                    placeholder="请输入生产状况"
                  />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input
                    :disabled="isZz"
                    v-model="form.remark"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </div>
            </el-collapse-item>
            <el-collapse-item title="租赁信息" name="2" id="zulin">
              <div class="form-box">
                <el-form-item label="租赁开始时间" prop="leaseRecord.beginTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.beginTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="租赁结束时间" prop="leaseRecord.endTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.endTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择结束时间"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="租赁保证金(元)">
                  <el-input
                    v-model="form.leaseRecord.surety"
                    placeholder="请输入租赁保证金"
                  />
                </el-form-item>
                <el-form-item label="装修保证金(元)">
                  <el-input
                    v-model="form.leaseRecord.decorationSurety"
                    placeholder="请输入装修保证金"
                  />
                </el-form-item>

                <el-form-item label="保证金缴纳时间" prop="rentFreeEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.suretyDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择保证金缴纳时间"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="合同总面积(㎡)" prop="leaseRecord.contractArea">
                  <el-input
                    v-model="form.leaseRecord.contractArea"
                    placeholder="请输入装修保证金"

                  />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="form.remark"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>

              </div>
            </el-collapse-item>


            <el-collapse-item title="房源列表" name="3" id="dianjian">
              <div class="form-box1">
                <el-button
                  type="primary"
                  @click="addDevice('buiRoomList')"
                  icon="el-icon-plus"
                  size="mini"
                >选择
                </el-button
                >
                <el-table :data="buiRoomListSelect">
                  <el-table-column
                    label="房源编号"
                    align="center"
                    prop="roomNum"
                  />
                  <el-table-column label="楼层" align="center" prop="floor"/>
                  <el-table-column label="园区" align="center" prop="parkName"/>
                  <el-table-column label="楼栋" align="center" prop="buildingName"/>
                  <el-table-column label="房源面积(m²)" align="center" prop="builtUpArea"/>
                  <el-table-column label="合同面积(m²)" align="center" prop="contractArea">
                    <template slot-scope="scope">
                      <el-input type="number" v-model="scope.row.contractArea" placeholder="请输入合同面积"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="delDevice('buiRoomList', scope.$index)"
                      >删除
                      </el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item title="租金费用" name="4" id="dianjian1">
              <div class="form-box">
                <el-form-item label="开始免租时间" prop="rentFreeBeginDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feOffice.rentFreeBeginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始免租时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="免租结束时间" prop="rentFreeEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feOffice.rentFreeEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择免租结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="租金收取开始时间" prop="rentBeginDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feOffice.rentBeginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始免租时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="租金收取结束时间" prop="rentEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feOffice.rentEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择免租结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="下期账单时间" prop="nextRentDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feOffice.nextRentDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择免租结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="当前租金单价" prop="officePrice">
                  <el-input
                    v-model="form.leaseRecord.feOffice.price"
                    placeholder="请输入当前租金单价"/>
                </el-form-item>

                <el-form-item label="租金收取模式" prop="officeModel">
                  <el-select
                    clearable
                    v-model="form.leaseRecord.feOffice.officeModel"
                    placeholder="请选择租金收取模式">
                    <el-option label="以单价按月收费" value="以单价按月收费"></el-option>
                    <el-option label="以单价按季度收费" value="以单价按季度收费"></el-option>
                    <el-option label="按月固定收费" value="按月固定收费"></el-option>
                    <el-option label="按季度固定收费" value="按季度固定收费"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="计费类型" prop="calculationMode">
                  <el-select
                    clearable
                    v-model="form.leaseRecord.feOffice.calculationMode"
                    placeholder="请选择计费类型">
                    <el-option label="手动计费" value="手动计费"></el-option>
                    <el-option label="自动计费" value="自动计费"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="生效状态" prop="effect">
                  <el-select
                    clearable
                    v-model="form.leaseRecord.feOffice.effect"
                    placeholder="请选择生效状态">
                    <el-option label="未生效" value="0"></el-option>
                    <el-option label="已生效" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="form.leaseRecord.feOffice.remark"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </div>
              <div class="form-box1">
                <el-table :data="OfficeTotalSel">
                  <el-table-column
                    label="第一年租金"
                    align="center"
                    prop="firstYearRental">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.firstYearRental"
                        placeholder="请输入第一年租金"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="第二年租金"
                    align="center"
                    prop="secondYearRental">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.secondYearRental"
                        placeholder="请输入第二年租金"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="第三年租金"
                    align="center"
                    prop="thirdYearRental"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.thirdYearRental"
                        placeholder="请输入第三年租金"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="第四年租金"
                    align="center"
                    prop="fourthYearRental"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.fourthYearRental"
                        placeholder="请输入第四年租金"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="第五年租金"
                    align="center"
                    prop="fifthYearRental"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.fifthYearRental"
                        placeholder="请输入第五年租金"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item title="设施设备使用费" name="5" id="sheshi">
              <div class="form-box">
                <el-form-item label="免收开始时间" prop="rentFreeBeginDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feFacility.rentFreeBeginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择免收开始时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="免收结束时间" prop="rentFreeEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feFacility.rentFreeEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择免收结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="收费开始时间" prop="rentBeginDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feFacility.rentBeginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始免租时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="收费结束时间" prop="rentEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feFacility.rentEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择免租结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="下期账单时间" prop="nextRentDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feFacility.nextRentDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择下期账单时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="当前设施费单价" prop="facilityPrice">
                  <el-input
                    v-model="form.leaseRecord.feFacility.price"
                    placeholder="请输入当前设施费单价"/>
                </el-form-item>

                <el-form-item label="设施费收取模式" prop="officeModel">
                  <el-select
                    clearable
                    v-model="form.leaseRecord.feFacility.facilityModel"
                    placeholder="请选择设施费收取模式">
                    <el-option label="以单价按月收费" value="以单价按月收费"></el-option>
                    <el-option label="以单价按季度收费" value="以单价按季度收费"></el-option>
                    <el-option label="按月固定收费" value="按月固定收费"></el-option>
                    <el-option label="按季度固定收费" value="按季度固定收费"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="计费类型" prop="calculationMode">
                  <el-select
                    clearable
                    v-model="form.leaseRecord.feFacility.calculationMode"
                    placeholder="请选择计费类型">
                    <el-option label="手动计费" value="手动计费"></el-option>
                    <el-option label="自动计费" value="自动计费"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="生效状态" prop="effect">
                  <el-select
                    clearable
                    v-model="form.leaseRecord.feFacility.effect"
                    placeholder="请选择生效状态">
                    <el-option label="未生效" value="0"></el-option>
                    <el-option label="已生效" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="form.leaseRecord.feFacility.remark"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </div>
              <el-table :data="feFacilitySel">
                <el-table-column
                  label="第一年配套设施使用费（实收/应收）"
                  align="center"
                  prop="firstYearFacilityFee">
                  <template slot-scope="scope">

                    <el-input
                      v-model="scope.row.firstFacilityFee"
                      placeholder="第一年配套设施使用费"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="第二年配套设施使用费（实收/应收）"
                  align="center"
                  prop="secondYearFacilityFee"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.secondFacilityFee"
                      placeholder="请输入第二年费用"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="第三年配套设施使用费（实收/应收）"
                  align="center"
                  prop="thirdYearFacilityFee"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.thirdFacilityFee"
                      placeholder="请输入第三年费用"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="第四年配套设施使用费（实收/应收）"
                  align="center"
                  prop="fourthYearFacilityFee"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fourthFacilityFee"
                      placeholder="请输入第四年费用"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="第五年配套设施使用费（实收/应收）"
                  align="center"
                  prop="fifthYearFacilityFee"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fifthFacilityFee"
                      placeholder="请输入第五年费用"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>

            <el-collapse-item title="物业信息" name="6" id="wuye">
              <div class="form-box">
                <el-form-item label="物业免收开始时间" prop="freeBeginDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feProperty.freeBeginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="物业免收开始时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="物业免收结束时间" prop="freeEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feProperty.freeEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="物业免收结束时间"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="物业收取开始时间" prop="propertyBeginDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feProperty.propertyBeginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="物业收取开始时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="物业收取结束时间" prop="propertyEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feProperty.propertyEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="物业收取结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="下期账单时间" prop="nextPropertyDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.feProperty.nextPropertyDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择下期账单时间"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="物业收费模式" prop="feeModel">
                  <el-select v-model="form.leaseRecord.feProperty.feeModel">
                    <el-option value="0" label="按月"></el-option>
                    <el-option value="1" label="按季"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="收费金额" prop="feeStandard">
                  <el-input
                    v-model="form.leaseRecord.feProperty.feeStandard"
                    placeholder="请输入计价标准"
                  />
                </el-form-item>
              </div>
            </el-collapse-item>

            <el-collapse-item title="其他费用" name="5" id="otherfee">
              <div class="form-box">
                <el-form-item label="垃圾费" prop="garbageFee">
                  <el-input
                    v-model="form.garbageFee"
                    placeholder="请输入垃圾费"
                  />
                </el-form-item>
                <el-form-item label="污水处理费" prop="sewageFee">
                  <el-input
                    v-model="form.sewageFee"
                    placeholder="请输入污水处理费"
                  />
                </el-form-item>
              </div>
            </el-collapse-item>

            <el-collapse-item title="附件上传" name="7" id="fujian">
              <div class="form-box">
                <el-form-item label="附件">
                  <FileUpload ref="fileupload" :fileListTem="form.fileIdList" :fileSize="fileSize" :limit="20"/>
                </el-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="right">
          <div class="my-steps-box">
            <div
              :class="['step-item', stepSelect == index ? 'step-active' : '']"
              v-for="(item, index) in step"
              :key="index"
            >
              <div class="top-title" @click="jump(item.to, index)">
                <div class="cricle"></div>
                <span class="text">{{ item.text }}</span>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-foot-fixed">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-form>
    <el-dialog :title="title" :visible.sync="dialogdeviceVisible">
      <div v-if="typeFee === 'buiRoomList'">
        <el-form
          :model="queryListBuiRoom"
          ref="queryListBuiRoomForm"
          :inline="true"
          label-width="68px"
        >

          <el-form-item label="园区" prop="roomType" label-width="40px">
            <el-select
              style="width: 150px"
              clearable
              v-model="queryListBuiRoom.parkName"
              placeholder="请选择园区"
            >
              <el-option
                v-for="item in parkList"
                :key="item.id"
                :label="item.parkName"
                :value="item.parkName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="楼栋" prop="state" label-width="40px">
            <el-select
              style="width: 150px"
              clearable
              v-model="queryListBuiRoom.buildingName"
              placeholder="请选择楼栋"
            >
              <el-option
                v-for="item in buildingList"
                :key="item.id"
                :label="item.buildingName"
                :value="item.buildingName"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="queryListBuiRoomFn"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQueryListBuiRoomFn"
            >重置
            </el-button
            >
            <el-button icon="el-icon-plus" size="mini" @click="$router.push('/smartParks/parkAssets/buildingRoom')"
            >添加房源
            </el-button
            >
          </el-form-item>
        </el-form>


        <el-table
          key="buiRoomList"
          ref="buiRoomListRef"
          :data="buiRoomList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          @selection-change="handleDevice"
        >
          <el-table-column
            v-if="typeFee === 'buiRoomList'"
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
          />
          <el-table-column label="房源编号" align="center" prop="roomNum"/>
          <el-table-column label="楼层" align="center" prop="floor"/>
          <el-table-column label="园区" align="center" prop="parkName"/>
          <el-table-column label="楼栋" align="center" prop="buildingName"/>
          <el-table-column
            label="房源面积(m²)"
            align="center"
            prop="builtUpArea"
          />
        </el-table>
        <pagination v-show="buiRoomListTotal > 0" :total="buiRoomListTotal"/>
      </div>
      <div v-if="typeFee === 'office'">
        <el-table
          key="office"
          ref="feOfficeListRef"
          :data="feOfficeList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column
            label="第一年租金"
            align="center"
            prop="firstYearRental"
          />
          <el-table-column
            label="第二年租金"
            align="center"
            prop="secondYearRental"
          />
          <el-table-column
            label="第三年租金"
            align="center"
            prop="thirdYearRental"
          />
          <el-table-column
            label="第四年租金"
            align="center"
            prop="fourthYearRental"
          />
          <el-table-column
            label="第五年租金"
            align="center"
            prop="fifthYearRental"
          />
        </el-table>
        <pagination v-show="OfficeTotal > 0" :total="OfficeTotal"/>
      </div>
      <div v-if="typeFee === 'facilities'">
        <el-table
          key="facilities"
          ref="feFacilityListRef"
          :data="feFacilityList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column
            label="第一年配套设施使用费"
            align="center"
            prop="firstYearFacilityFee"
          />
          <el-table-column
            label="第二年配套设施使用费"
            align="center"
            prop="secondYearFacilityFee"
          />
          <el-table-column
            label="第三年配套设施使用费"
            align="center"
            prop="thirdYearFacilityFee"
          />
          <el-table-column
            label="第四年配套设施使用费"
            align="center"
            prop="fourthYearFacilityFee"
          />
          <el-table-column
            label="第五年配套设施使用费"
            align="center"
            prop="fifthYearFacilityFee"
          />
        </el-table>
        <pagination v-show="feFacilityTotal > 0" :total="feFacilityTotal"/>
      </div>
      <div v-if="typeFee === 'elevator'">
        <el-table
          key="elevator"
          ref="feElevatorListRef"
          :data="feElevatorList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column label="区域" align="center" prop="area"/>
          <el-table-column label="公用" align="center" prop="shared"/>
          <el-table-column
            label="维保费"
            align="center"
            prop="maintenanceFee"
          />
          <el-table-column
            label="年检费"
            align="center"
            prop="yearlyInspectionFee"
          />
          <el-table-column label="电费" align="center" prop="electricityFee"/>
          <el-table-column label="维修费" align="center" prop="repairFee"/>
        </el-table>
        <pagination v-show="feElevatorTotal > 0" :total="feElevatorTotal"/>
      </div>

      <div v-if="typeFee === 'property'">
        <el-table
          key="property"
          ref="fePropertyListRef"
          :data="fePropertyList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column label="收费模式" align="center" prop="feeModel">
            <template slot-scope="scope">
              <span>{{ scope.row.feeModel == '0' ? '固定收费' : scope.row.feeModel == '1' ? '平方收费' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="计价标准(元/平方/月)"
            align="center"
            prop="feeStandard"
          />
        </el-table>

        <pagination v-show="fePropertyTotal > 0" :total="fePropertyTotal"/>
      </div>

      <div v-if="typeFee === 'chooseEnter'">
        <el-table
          key="elevator"
          ref="chooseEnterRef"
          :data="zsCustomerList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column label="企业" align="center" prop="enterpriseName"/>
        </el-table>
        <pagination v-show="feElevatorTotal > 0" :total="feElevatorTotal"/>
      </div>

      <span slot="footer" class="dialog-footer">
            <el-button @click="cancelDevice(typeFee)">取 消</el-button>
            <el-button type="primary" @click="submitDevice(typeFee)"
            >确 定</el-button
            >
          </span>
    </el-dialog>

    <el-dialog title="选择入驻企业" :visible.sync="showChooseEnter">
      <el-select v-model="chooseEnterTem" @change="chooseEnterFn" filterable>
        <el-option :value="item.id" :label="item.enterpriseName" v-for="item in zsCustomerList"
                   :key="item.id"></el-option>
      </el-select>
      <!--      <span slot="footer" class="dialog-footer">-->
      <!--            <el-button @click="showChooseEnter=false">取 消</el-button>-->
      <!--            <el-button type="primary" @click="submitChooseEnter()"-->
      <!--            >确 定</el-button-->
      <!--            >-->
      <!--          </span>-->
    </el-dialog>
  </div>
</template>
<script>
import {
  getQyEnterprise,
  addQyEnterprise,
  updateQyEnterprise
} from '@/api/smartParks/merchants/merchantsCompanySettlein'
import { returntomenu } from '@/utils/common'
import { listZsCustomer } from '@/api/smartParks/merchants/merchantsCustomer'
import { listBuiRoom } from '@/api/parkAssets/buildingRoom' //房源
import { listFeOffice } from '@/api/smartParks/operatingFee/office'
import { listFeFacility } from '@/api/smartParks/operatingFee/facilities'
import { listFeElevator } from '@/api/smartParks/operatingFee/elevator'
import { listFeProperty } from '@/api/smartParks/operatingFee/property'
import { listFeFixed } from '@/api/smartParks/operatingFee/fixed'
import { listFeParking } from '@/api/smartParks/operatingFee/park'
import FileUpload from '@/views/smartParks/parkAssets/components/FileUpload.vue'
import { listQyEnterpriseType } from '@/api/smartParks/merchants/enterpriseType'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
  listQyEnterpriseProductionType,
  getQyEnterpriseProductionType,
  delQyEnterpriseProductionType,
  addQyEnterpriseProductionType,
  updateQyEnterpriseProductionType
} from '@/api/system/qyEnterpriseProductionType'
import { getDicts } from '@/api/system/dict/data'
import { listBuiPark } from '@/api/parkAssets/enterCommunity'
import { listBuiBuilding } from '@/api/parkAssets/building'

export default {
  name: 'MerchantsCompanySettleinAdd',
  components: {
    FileUpload,
    Treeselect
  },
  data() {
    return {
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      step: [
        {
          to: 'shenqing',
          text: '申请信息'
        },
        {
          to: 'zulin',
          text: '租赁信息'
        },
        {
          to: 'dianjian',
          text: '房源列表'
        },
        {
          to: 'dianjian1',
          text: '租金费用'
        },
        {
          to: 'sheshi',
          text: '使用费用'
        },
        {
          to: 'wuye',
          text: '物业费用'
        },
        {
          to: 'otherfee',
          text: '其他费用'
        },
        {
          to: 'fujian',
          text: '上传附件'
        }
      ],
      isZz: false,//是否是增租
      fileSize: 20,//上传文件大小限制
      stepSelect: 0,
      showChooseEnter: false,
      // 表单参数
      form: {
        id: null,
        recordType: 0,
        zengZuId: '',
        enterpriseName: null,
        legalPerson: null,
        legalPhone: null,
        enterpriseContact: null,
        contactPhone: null,
        typeId: null,
        registrationDate: null,
        mainProduct: null,
        enterpriseScale: null,
        taxRegistrationDate: null,
        approvalDate: null,
        acceptanceDate: null,
        createBy: null,
        productionStatus: null,
        createTime: null,
        address: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,
        fileIdList: [],
        customerId: null,
        enterType: null,
        productionType: null,
        leaseRecord: {
          roomIdList: [], //
          roomVOList: [],
          beginTime: '',
          endTime: '',
          contractArea: '', //合同总面积
          surety: '',
          decorationSurety: '',
          suretyDate: '',
          rentFreeBeginDate: '',
          rentFreeEndDate: '',
          rentBeginDate: '',
          rentEndDate: '',
          nextRentDate: '',
          facilityFeeId: '', //设施
          fixedFeeId: '', //固定费用
          officeFeeId: '', //办公费用
          propertyFeeId: '', //物业
          parkingFeeId: '', //停车费用
          feProperty: {
            id: null,
            propertyBeginDate: null,
            propertyEndDate: null,
            freeBeginDate: null,
            freeEndDate: null,
            nextPropertyDate: null,
            feeModel: '',
            feeStandard: ''
          },
          feFacility: {
            facilityModel:'',
            rentFreeBeginDate: '',
            rentFreeEndDate: '',
            rentBeginDate: '',
            rentEndDate: '',
            nextRentDate: '',
            effect: '',
            calculationMode: '手动计费',
          },
          feOffice: {
            officeModel:'',
            rentFreeBeginDate: '',
            rentFreeEndDate: '',
            rentBeginDate: '',
            rentEndDate: '',
            nextRentDate: '',
            effect: '',
            calculationMode: '手动计费'
          }
        }
      },
      zsCustomerList: [], //或缺企业
      queryListBuiRoom: {
        parkNum: '',
        buildingNum: ''
      },
      enterpriseTypeOptions: [], //企业类型
      // 表单校验
      rules: {
        enterpriseName: [
          { required: true, message: '企业名称不能为空', trigger: 'blur' }
        ],
        'leaseRecord.contractArea': [
          { required: true, message: '合同总面积不能为空', trigger: 'blur' }
        ],

        'leaseRecord.beginTime': [
          { required: true, message: '租赁开始时间不能为空', trigger: 'blur' }
        ],

        legalPerson: [
          { required: true, message: '企业法人不能为空', trigger: 'blur' }
        ],
        legalPhone: [
          { required: true, message: '法人联系电话不能为空', trigger: 'blur' }
        ]
      },
      parkList: [],
      buildingList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogdeviceVisible: false, //房源
      loading: false,
      buiRoomList: [], //房源列表
      buiRoomListTotal: '',
      buiRoomListSelectTem: [], //选择的
      buiRoomListSelect: [], //确定的
      title: '', //谈框标题
      typeFee: '', //那种费用
      feOfficeList: [], //办公
      OfficeTotal: 0,
      OfficeTotalTem: {},
      OfficeTotalSel: [{
        firstYearRental: '',
        secondYearRental: '',
        thirdYearRental: '',
        fourthYearRental: '',
        fifthYearRental: ''
      }],
      feFacilityList: [], //设施
      feFacilityTotal: 0,
      feFacilityTem: {},
      feFacilitySel: [{
        firstYearFacilityFee: '',
        secondYearFacilityFee: '',
        thirdYearFacilityFee: '',
        fourthYearFacilityFee: '',
        fifthYearFacilityFee: ''
      }],
      enterTypeOpts: [],
      fePropertyList: [], //property
      fePropertyTotal: 0,
      fePropertyListTem: {},
      fePropertyListSel: [{
        id: null,
        propertyBeginDate: null,
        propertyEndDate: null,
        freeBeginDate: null,
        freeEndDate: null,
        nextPropertyDate: null,
        feeModel: '',
        feeStandard: ''
      }],
      chooseEnterSel: [],

      feFixedList: [], //fixed
      feFixedTotal: 0,
      feFixedListSel: [],
      feFixedListTem: {},

      feParkingList: [], //park
      feParkingTotal: 0,
      feParkingListSel: [],
      feParkingListTem: {},
      chooseEnterTem: {},//企业信息
      qyEnterpriseTypeList: [],
      qyEnterpriseProductionTypes: []
    }
  },
  watch: {
    'queryListBuiRoom.parkNum': {
      deep: true,
      handler(val) {
        listBuiBuilding({ parkNum: val }).then((response) => {
          this.buildingList = response.rows
        })
      }
    }
  },

  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('tagsView/delView', this.$route)
    next()
  },
  created() {
    this.zengZuId = this.$route.query.id
    if (!this.isEmpty(this.zengZuId)) {
      this.isZz = true
      getQyEnterprise(this.zengZuId).then(res => {
        let data = res.data
        this.form.enterpriseName = data.enterpriseName
        this.form.enterpriseContact = data.enterpriseContact
        this.form.contactPhone = data.contactPhone
        this.form.enterType = data.enterType
        this.form.productionType = data.productionType.split(',')
        this.form.legalPerson = data.legalPerson
        this.form.legalPhone = data.legalPhone
        this.form.taxRegistrationDate = data.taxRegistrationDate
        this.form.enterpriseScale = data.enterpriseScale
        this.form.approvalDate = data.approvalDate
        this.form.acceptanceDate = data.acceptanceDate
        this.form.productionStatus = data.productionStatus
        this.form.remark = data.remark
        this.form.customerId = data.customerId
      })
    }
    this.getmaintainList() //列表
    this.getList() //房源
    this.getParkBuiBuildingList()
    getDicts('enter_type').then(res => {
      this.enterTypeOpts = res.data
    })
    listQyEnterpriseType().then((response) => {
      this.qyEnterpriseTypeList = this.handleTree(response.rows, 'id')
    })
    listQyEnterpriseProductionType().then(res => {
      this.qyEnterpriseProductionTypes = res.rows
    })
  },
  methods: {
    jump(domId, index) {
      this.stepSelect = index
      //页面滚动了的距离
      let height =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      let dom = document.getElementById(domId)
      // let domHeight = dom.offsetTop + 60;
      let domHeight = dom.offsetTop - 104
      //滚动距离计算
      var S = Number(height) - Number(domHeight)
      //判断上滚还是下滚
      if (S < 0) {
        //下滚
        S = Math.abs(S)
        window.scrollBy({
          top: S,
          behavior: 'smooth'
        })
      } else if (S == 0) {
        //不滚
        window.scrollBy({
          top: 0,
          behavior: 'smooth'
        })
      } else {
        //上滚
        S = -S
        window.scrollBy({
          top: S,
          behavior: 'smooth'
        })
      }
    },
    getParkBuiBuildingList() {
      //查询园区列表，赋值给parkList;
      listBuiPark().then((response) => {
        this.parkList = response.rows
      })

      listBuiBuilding().then((response) => {
        this.buildingList = response.rows
      })
    },
    chooseEnterFn(id) {
      let rItem = this.zsCustomerList.find(item => {
        return item.id == id
      })
      this.chooseEnterTem = rItem
      this.form.enterpriseName = this.chooseEnterTem.enterpriseName
      this.form.contactPhone = this.chooseEnterTem.contactPhone
      this.form.enterpriseContact = this.chooseEnterTem.enterpriseContact
      this.form.address = this.chooseEnterTem.enterpriseAddress
      this.form.enterType = this.chooseEnterTem.enterType//企业类型
      this.form.typeId = this.chooseEnterTem.enterpriseType//行业类型
      this.form.customerId = this.chooseEnterTem.id
      this.showChooseEnter = false
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.enterpriseType,
        children: node.children
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        recordType: 0,
        enterpriseName: null,
        legalPerson: null,
        legalPhone: null,
        enterpriseContact: null,
        contactPhone: null,
        enterpriseType: null,
        registrationDate: null,
        mainProduct: null,
        enterpriseScale: null,
        taxRegistrationDate: null,
        approvalDate: null,
        acceptanceDate: null,
        customerId: null,
        createBy: null,
        productionStatus: null,
        createTime: null,
        address: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,
        enterType: null,
        productionType: null,
        fileIdList: [],
        leaseRecord: {
          roomIdList: [], //
          roomVOList: [],
          beginTime: '',
          endTime: '',
          rentFreeBeginDate: '',
          rentFreeEndDate: '',
          facilityFeeId: '', //设施
          fixedFeeId: '', //固定费用
          officeFeeId: '', //办公费用
          propertyFeeId: '', //物业
          parkingFeeId: '', //停车费用
          feProperty: {
            id: null,
            propertyBeginDate: null,
            propertyEndDate: null,
            freeBeginDate: null,
            freeEndDate: null,
            nextPropertyDate: null,
            feeModel: '',
            feeStandard: ''
          },
          feFacility: {
            rentFreeBeginDate: '',
            rentFreeEndDate: '',
            rentBeginDate: '',
            rentEndDate: '',
            nextRentDate: '',
            effect: '',
            calculationMode: '手动计费'
          },
          feOffice: {
            rentFreeBeginDate: '',
            rentFreeEndDate: '',
            rentBeginDate: '',
            rentEndDate: '',
            nextRentDate: '',
            effect: '',
            calculationMode: '手动计费'
          }
        }
      }
      //设施
      this.feFacilitySel = [{
        firstYearFacilityFee: '',
        secondYearFacilityFee: '',
        thirdYearFacilityFee: '',
        fourthYearFacilityFee: '',
        fifthYearFacilityFee: '',
        firstYearTotal: '',
        secondYearTotal: '',
        thirdYearTotal: '',
        fourthYearTotal: '',
        fifthYearTotal: '',
        firstFacilityFee: '',
        secondFacilityFee: '',
        thirdFacilityFee: '',
        fourthFacilityFee: '',
        fifthFacilityFee: ''
      }]
      this.feFixedListSel = []
      //租金
      this.OfficeTotalSel = [
        {
          firstYearRental: '',
          secondYearRental: '',
          thirdYearRental: '',
          fourthYearRental: '',
          fifthYearRental: ''
        }
      ]
      this.feParkingListSel = []
      this.buiRoomListSelect = []
      //物业费
      this.fePropertyListSel = [
        {
          feeModel: '',
          feeStandard: ''
        }
      ]
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },

    //获取列表
    getmaintainList() {
      //选择企业
      listZsCustomer({ settledState: '0' }).then((response) => {
        this.zsCustomerList = response.rows
      })
      //企业类型
      this.getDicts('enterprise_type').then((response) => {
        this.enterpriseTypeOptions = response.data
      })
    },
    getList() {
      let data = {
        leaseState: 0,
        // roomTypeList: ["0", "2"],
        stateList: ['租赁']
      }
      listBuiRoom(data).then((response) => {
        this.buiRoomList = response.rows
        this.buiRoomListTotal = response.total
        this.loading = false
      })
      listFeOffice().then((response) => {
        this.feOfficeList = response.rows
        this.OfficeTotal = response.total
        this.loading = false
      })
      listFeFacility().then((response) => {
        this.feFacilityList = response.rows
        this.feFacilityTotal = response.total
        this.loading = false
      })
      listFeElevator().then((response) => {
        this.feElevatorList = response.rows
        this.feElevatorTotal = response.total
        this.loading = false
      })
      listFeProperty().then((response) => {
        this.fePropertyList = response.rows
        this.fePropertyTotal = response.total
        this.loading = false
      })
      listFeFixed().then((response) => {
        this.feFixedList = response.rows
        this.feFixedTotal = response.total
        this.loading = false
      })
      listFeParking(this.queryParams).then((response) => {
        this.feParkingList = response.rows
        this.feParkingTotal = response.total
        this.loading = false
      })
    },
    queryListBuiRoomFn() {
      let data = {
        leaseState: 0,
        // roomTypeList: ["0", "2"],
        stateList: ['租赁'],
        ...this.queryListBuiRoom
      }
      listBuiRoom(data).then((response) => {
        this.buiRoomList = response.rows
        this.buiRoomListTotal = response.total
        this.loading = false
      })
    },
    resetQueryListBuiRoomFn() {
      this.queryListBuiRoom = {
        parkNum: '',
        buildingNum: ''
      }
      this.queryListBuiRoomFn()
    },
    addDevice(param) {
      this.dialogdeviceVisible = true
      this.typeFee = param
      if (this.typeFee === 'buiRoomList') {
        this.title = '选择房源'
        if (this.buiRoomListSelect.length > 0) {
          this.$refs.buiRoomListRef.clearSelection()
          this.$nextTick(() => {
            this.buiRoomListSelect.forEach((row) => {
              this.$refs.buiRoomListRef.toggleRowSelection(
                this.buiRoomList.find((item) => {
                  return row.id === item.id
                }),
                true
              )
            })
          })
        } else {
          this.$nextTick(() => {
            this.$refs.buiRoomListRef.clearSelection()
          })
        }
      }
      if (this.typeFee === 'office') {
        this.title = '选择办公费用'
        if (this.OfficeTotalSel.length > 0) {
          this.$nextTick(() => {
            this.OfficeTotalSel.forEach((row) => {
              this.$refs.feOfficeListRef.toggleRowSelection(
                this.feOfficeList.find((item) => {
                  return row.id === item.id
                }),
                true
              )
            })
          })
        } else {
          this.$nextTick(() => {
            this.$refs.feOfficeListRef.setCurrentRow()
          })
        }
      }

      if (this.typeFee === 'facilities') {
        this.title = '选择设施费用'
        if (this.feFacilitySel.length > 0) {
          this.$nextTick(() => {
            this.feFacilitySel.forEach((row) => {
              this.$refs.feFacilityListRef.toggleRowSelection(
                this.feFacilityList.find((item) => {
                  return row.id === item.id
                }),
                true
              )
            })
          })
        } else {
          this.$nextTick(() => {
            this.$refs.feFacilityListRef.setCurrentRow()
          })
        }
      }

      if (this.typeFee === 'property') {
        this.title = '选择物业费用'
        if (this.fePropertyListSel.length > 0) {
          this.$nextTick(() => {
            this.fePropertyListSel.forEach((row) => {
              this.$refs.fePropertyListRef.toggleRowSelection(
                this.fePropertyList.find((item) => {
                  return row.id === item.id
                }),
                true
              )
            })
          })
        } else {
          this.$nextTick(() => {
            this.$refs.fePropertyListRef.setCurrentRow()
          })
        }
      }

      if (this.typeFee === 'chooseEnter') {
        this.title = '选择入驻企业'
        if (this.chooseEnterSel.length > 0) {
          this.$nextTick(() => {
            this.chooseEnterSel.forEach((row) => {
              this.$refs.chooseEnterRef.toggleRowSelection(
                this.zsCustomerList.find((item) => {
                  return row.id === item.id
                }),
                true
              )
            })
          })
        } else {
          this.$nextTick(() => {
            this.$refs.fePropertyListRef.setCurrentRow()
          })
        }
      }

      if (this.typeFee === 'fixed') {
        this.title = '选择固定费用'
        if (this.feFixedListSel.length > 0) {
          this.$nextTick(() => {
            this.feFixedListSel.forEach((row) => {
              this.$refs.feFixedListRef.toggleRowSelection(
                this.feFixedList.find((item) => {
                  return row.id === item.id
                }),
                true
              )
            })
          })
        } else {
          this.$nextTick(() => {
            this.$refs.feFixedListRef.setCurrentRow()
          })
        }
      }
      if (this.typeFee === 'park') {
        this.title = '选择车位费用'
        if (this.feParkingListSel.length > 0) {
          this.$nextTick(() => {
            this.feParkingListSel.forEach((row) => {
              this.$refs.feParkingListRef.toggleRowSelection(
                this.feParkingList.find((item) => {
                  return row.id === item.id
                }),
                true
              )
            })
          })
        } else {
          this.$nextTick(() => {
            this.$refs.feParkingListRef.setCurrentRow()
          })
        }
      }
    },
    cancelChooseEnter() {
      this.reset()
      this.chooseEnterTem = null
    },
    //确定
    submitDevice() {
      this.dialogdeviceVisible = false
      if (this.typeFee === 'buiRoomList') {
        let selectList = JSON.parse(JSON.stringify(this.buiRoomListSelectTem));
        for (const item of selectList){
          item.contractArea = item.builtUpArea
          this.buiRoomListSelect.push( item)
        }
      }
      if (this.typeFee === 'office') {
        let temArr = [this.OfficeTotalTem]
        this.OfficeTotalSel = JSON.parse(JSON.stringify(temArr))
      }
      if (this.typeFee === 'facilities') {
        let temArr = [this.feFacilityTem]
        this.feFacilitySel = JSON.parse(JSON.stringify(temArr))
      }

      if (this.typeFee === 'property') {
        let temArr = [this.fePropertyListTem]
        this.fePropertyListSel = JSON.parse(JSON.stringify(temArr))
      }
      if (this.typeFee === 'fixed') {
        let temArr = [this.feFixedListTem]
        this.feFixedListSel = JSON.parse(JSON.stringify(temArr))
      }
      if (this.typeFee === 'park') {
        let temArr = [this.feParkingListTem]
        this.feParkingListSel = JSON.parse(JSON.stringify(temArr))
      }
    },
    getRowKey(row) {
      return row.id
    },
    // //选择房源
    handleDevice(val) {
      if (this.typeFee === 'buiRoomList') {
        this.buiRoomListSelectTem = val
      }
      if (this.typeFee === 'office') {
        this.OfficeTotalTem = val
      }
      if (this.typeFee === 'facilities') {
        this.feFacilityTem = val
      }
      if (this.typeFee === 'elevator') {
        this.feElevatorListTem = val
      }
      if (this.typeFee === 'property') {
        this.fePropertyListTem = val
      }
      if (this.typeFee === 'fixed') {
        this.feFixedListTem = val
      }
      if (this.typeFee === 'park') {
        this.feParkingListTem = val
      }
      if (this.typeFee === 'chooseEnter') {
        this.chooseEnterTem = val
      }
    },

    delDevice(param, index) {
      if (param === 'buiRoomList') {
        this.buiRoomListSelect.splice(index, 1)
      }
      if (param === 'office') {
        this.OfficeTotalSel = []
      }
      if (param === 'facilities') {
        this.feFacilitySel = []
      }

      if (param === 'property') {
        this.fePropertyListSel = []
      }
      if (param === 'fixed') {
        this.feFixedListSel = []
      }
      if (param === 'park') {
        this.feParkingListSel = []
      }
    },

    cancelDevice() {
      this.dialogdeviceVisible = false
    },
    //选择办公费用
    handleOffice() {
    },
    /** 提交按钮 */
    submitForm() {
      console.log("submitForm")
      this.form.leaseRecord.facilityFeeId =
        this.feFacilitySel.length === 1 ? this.feFacilitySel[0].id : ''

      var facility = this.feFacilitySel.length === 1 ? this.feFacilitySel[0] : ''

      facility.rentFreeBeginDate = this.form.leaseRecord.feFacility.rentFreeBeginDate
      facility.rentFreeEndDate = this.form.leaseRecord.feFacility.rentFreeEndDate
      facility.rentBeginDate = this.form.leaseRecord.feFacility.rentBeginDate
      facility.rentEndDate = this.form.leaseRecord.feFacility.rentEndDate
      facility.nextRentDate = this.form.leaseRecord.feFacility.nextRentDate
      facility.effect = this.form.leaseRecord.feFacility.effect
      facility.calculationMode = this.form.leaseRecord.feFacility.calculationMode
      this.form.leaseRecord.feFacility = facility

      // this.form.leaseRecord.feFacility = this.feFacilitySel.length === 1 ? this.feFacilitySel[0] : ''
      this.form.leaseRecord.fixedFeeId =
        this.feFixedListSel.length === 1 ? this.feFixedListSel[0].id : ''
      this.form.leaseRecord.officeFeeId = this.OfficeTotalSel.length === 1 ? this.OfficeTotalSel[0].id : ''

      var office = this.OfficeTotalSel.length === 1 ? this.OfficeTotalSel[0] : ''

      office.rentFreeBeginDate = this.form.leaseRecord.feOffice.rentFreeBeginDate
      office.rentFreeEndDate = this.form.leaseRecord.feOffice.rentFreeEndDate
      office.rentBeginDate = this.form.leaseRecord.feOffice.rentBeginDate
      office.rentEndDate = this.form.leaseRecord.feOffice.rentEndDate
      office.nextRentDate = this.form.leaseRecord.feOffice.nextRentDate
      office.effect = this.form.leaseRecord.feOffice.effect
      office.calculationMode = this.form.leaseRecord.feOffice.calculationMode
      this.form.leaseRecord.feOffice = office
      //this.form.leaseRecord.feOffice = this.OfficeTotalSel.length === 1 ? this.OfficeTotalSel[0] : ''
      this.form.leaseRecord.propertyFeeId =
        this.fePropertyListSel.length === 1 ? this.fePropertyListSel[0].id : ''
      //this.form.leaseRecord.feProperty = this.fePropertyListSel.length === 1 ? this.fePropertyListSel[0] : ''
      this.form.leaseRecord.parkingFeeId =
        this.feParkingListSel.length === 1 ? this.feParkingListSel[0].id : ''
      this.form.leaseRecord.roomIdList = this.buiRoomListSelect.map((item) => {
        return item.id
      })
      this.form.leaseRecord.roomVOList = this.buiRoomListSelect
      this.form.productionType = this.form.productionType.toString()
      console.log(this.form)
      // this.$refs['form'].validate((valid) => {
      //   if (valid) {
      //     let data = JSON.parse(JSON.stringify(this.form))
      //     data.fileIdList = this.$refs.fileupload.fileList.map(
      //       (item) => item.id
      //     )
      //     if (this.form.id != undefined) {
      //       updateQyEnterprise(data).then((response) => {
      //         if (response.code === 200) {
      //           this.msgSuccess('修改成功')
      //           setTimeout(() => {
      //             returntomenu(this)
      //           }, 1000)
      //         }
      //       })
      //     } else {
      //       addQyEnterprise(data).then((response) => {
      //         if (response.code === 200) {
      //           this.msgSuccess('新增成功')
      //           this.reset()
      //         }
      //       })
      //     }
      //   }
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-select,
.el-date-editor {
  width: 100%;
}

.big-foot-fixed {
  text-align: center;
  padding-bottom: 20px;
}

.cgjhadd {
  overflow: hidden;
  background: #f7f8f8;
  min-height: calc(100vh - 84px);
  height: auto;

  .top {
    height: 40px;
    box-sizing: border-box;
    background: #409eff !important;
    color: #fff;
    padding-left: 20px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: space-between;

    .submit {
      padding: 3px 10px;
      border-radius: 10px;
      background: #fff;
      color: #409eff;
      cursor: pointer;
      margin-right: 100px;
    }
  }
}

.contain {
  height: auto !important;
  margin: 20px 20px 0px 20px;
  padding-bottom: 20px;
  display: flex;

  .left {
    .text-height {
      height: 80px;

      ::v-deep .el-form-item__content {
        height: 80px;
      }
    }

    .lrAbout {
      display: flex;
      justify-content: space-between;
    }

    width: 90%;

    ::v-deep .el-collapse {
      border-bottom: 0px;
    }

    ::v-deep .el-collapse-item {
      background: #fff;
      font-size: 12px;
      margin-bottom: 20px;

      .el-collapse-item__header,
      .el-collapse-item__wrap {
        background: "";
      }

      .el-collapse-item__header {
        position: relative;
        height: 44px;
        padding-left: 20px;
      }

      .el-collapse-item__header:before {
        position: absolute;
        content: "";
        width: 2px;
        height: 18px;
        background-color: #409eff;
        left: 0;
        top: 13px;
      }

      .el-collapse-item__wrap {
        border-top: 1px solid #e6ebf5;
      }

      .el-collapse-item__content {
        padding-top: 25px;
      }

      .form-box1 {
        width: 100%;
        padding: 0 20px;

        .el-button {
          margin-top: 10px;
        }

        .el-button:first-child {
          margin-top: -10px;
        }

        .el-table {
          margin-top: 10px;
        }
      }

      .form-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;

        .el-form-item {
          width: 48%;
        }

        .el-form-item__label {
          font-size: 12px;
          font-weight: normal;
        }

        .el-form-item:nth-child(2n) {
          margin-left: 4%;
        }
      }
    }

    ::v-deep .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    ::v-deep .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    ::v-deep .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    ::v-deep .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }

  .right {
    width: 10%;

    .my-steps-box {
      font-size: 12px;
      position: fixed;
      right: 30px;
      // top: 104px;
      .step-item {
        margin-bottom: 30px;
        position: relative;

        .top-title {
          display: flex;
          cursor: pointer;

          .cricle {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 5px;
            background: #e8eaec;
            box-sizing: border-box;
            // background: red;
            border: 2px solid #f7f8f8;
          }
        }

        .line {
          position: absolute;
          width: 2px;
          height: 30px;
          top: 12px;
          left: 5px;
          background: #e8eaec;
        }
      }

      .step-item.step-active {
        .cricle {
          border: 2px solid #d5e7f9;
          background-color: #2d8cf0;
        }

        .text {
          color: #2d8cf0;
        }
      }

      .step-item:nth-last-child(1) .line {
        display: none;
      }
    }
  }
}

.fyxzt {
  margin-top: 10px;

  &:first-child {
    margin-top: 0;
  }
}
</style>
